<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="${ctxStatic}/iframe0/css/style.css" />
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/iframe0/css/audioplayer.css"/>
    <link rel="stylesheet" href="${ctxStatic}/iframe0/css/add.css"/>
    <link rel="stylesheet" href="${ctxStatic}/iframe0/css/Dlayer.css"/>
    <style>
        #pic p,#pic .myname{
            color: transparent;
        }
        #list1>li>p{
            display: none;
        }
        #list1>li>.myname{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%!important;
            margin: 0;
            background-color: rgba(0,0,0,.7);
            color: #fff;
            opacity: 0.6;
            height: 30px;
            line-height: 30px;
            font-weight: bold;
            text-align: left;
        }
        .page{
            position: absolute;
            right: 0;
            top: 20px;
            color: #fff;
            font-weight: 900;
            padding: 4px 12px;
            background: rgba(0,0,0,.7);
            filter: alpha(opacity=70);
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }
        #pic{
            position: relative;
        }
    </style>
    <script type="text/javascript" src="${ctxStatic}/iframe0/js/jquery.min.js"></script>
    <script type="text/javascript" src="${ctxStatic}/iframe0/js/jquery.dragsort-0.5.2.min.js"></script>
    <script type="text/javascript">
        $("ul:first").dragsort();
    </script>
    <script type="text/javascript" src="${ctxStatic}/iframe0/js/drag.js"></script>

    <script>
        $(function(){
            // 默认点击第一张图片
            $('.s_event').each(function(){
                $(this).dragging({
                    move : 'x',
                    randomPosition : true
                });
            });
            function yml_mv(){

                $('.s_event').each(function(){
                    $(this).dragging({
                        move : 'x',
                        randomPosition : true
                    });
                });
            }
            $("#list1").children("li").first().trigger("click");
            $("#list1").children("li").first().attr("class","select");
            $("#list1").children("li").first().attr("checked",true);
            $("#list1").children("li").first().css('border','1px solid blue');
            $("#pic p").css('display','none');
            $("#picbox p").hide();
            // 接下来就是校验了
            // 先获取到隐藏域的值
             var sds = $("#jiaoyanyinpin").val();
             if(sds!=""){
                 alert(sds);
             }
        });
    </script>
    <script src="${ctxStatic}/iframe0/js/audioplayer.js" type="text/javascript" charset="utf-8"></script>
    <script src="${ctxStatic}/iframe0/js/main.js" type="text/javascript" charset="utf-8"></script>
</head>
<script type="text/javascript" src="/static/jquery/jquery.form.js"></script>
<script type="text/javascript" src="${ctxStatic}/iframe0/js/Dlayer.js"></script>
<script type="text/javascript">
    // 定义全局变量 用来接受 已经复制图片的id
    var copyid ;
    // 定义一个全局变量  用来接收 是举手还是测试
    var textorhand;
    // 定义一个全局变量  又来接受 当前的问题id
    var questionid = null;
    // 定义全局变量来接受 返回的事件集合
    var allsj=[];
    // 定义全局变量来接受当前的问题id;
    var ymlquestionid;
    // 定义全局变量 来接受当前的音频的id
    var ymlaudio;
    // 定义全局变量 用来记录当前循环次数的
    var ymlcishu;
    //定义全局变量 用来接收返回的问题的集合
    var ymlquestionlist =[];
    // 定义全局变量 用来接收当前的 举手次数
    var jushoucishu =1;
    // 定义全局变量 用来接收当前的  提问次数
    var tiwencishu =1;
    // 定义全局变量 用来接收当前的进行编辑和回显的问题详情
    var ymlbianjiquestionitem=[];
    // 定义全局变量 用来接收当前的  故事的次数
    var  ymlgushi =1;
    // 定义全局变量 用来接收当前的  笑话的次数
    var ymlxiaohua =1;
    //定义全局变量 用来接收当前的  问题详情的id
    var ymlquestionitemid;
    // 定义全局变量 用来接收当前的 问题选项的id
    //定义全局变量 用来接收当前的  包含编辑功能的展示次数
    var bianjicishu=0;
    var ymlquestionoptionid ;
    //定义一个全局变量
    var ymlcourseitemeventid;
    // 定义全局变量 用来接收当前图片的总的时间
    var courseitemseconds=0;
    //定义全局变量 用来动态的拼接当前图片的播放的时间
    var coureitembofangtime=0;
    //定义全局变量 用来接收当前第几个播放的音频
    var  courseaudionum;
    // 定时器 展示页面使用的
    var quanjutimeout;
    var quanjutimeout2;
    var showonequestion222;
    //定义定义 全局变量 用来接受 多图片的返回值
    var  coureitemlist="" ;
    // 展示问题总和时间的延时器
    function quanjutime22(time){
        quanjutimeout= setTimeout(function () {
           ymltijiao();
        },time);
    }
    // 展示笑话和故事的延时器
    function quanjutime33(time){
        quanjutimeout2= setTimeout(function () {
            tanchuanyincang();
        },time);
    }
    // 展示单个问题的延时器
    function showonequestion(time){
        showonequestion222=setTimeout(function () {
            //点击下一题按钮
            ymlxiayiti();
        },time);
    }
    // 取消单个问题的延时器
    function quxiaoshowqueation() {
                clearTimeout(showonequestion222);
            }
    //取消问题总和的延时器
    function quxiaodingshiqi(){
        clearTimeout(quanjutimeout);
    }
    // 取消笑话和故事的延时器
    function quxiaodingshiqi2(){
        clearTimeout(quanjutimeout2);
    }

    // 这是当前页面的播放按钮的点击播放事件
    function ymlbofang() {
        //获取到当前的第一个音频文件 然后进行 播放
        var elementById = document.getElementById("audio0");
        $(".audioplayer-playpause:first").trigger("click");
        // 还需要设置当前的播放按钮成播放状态
        $("#audio_play").hide();
    }
    /** 将秒数转换成00:00:00**/
    function formatTime(dom){
        // 计算
        var h=0,i=0,s=parseInt(dom);
        if(s>60){
            i=parseInt(s/60);
            s=parseInt(s%60);
            if(i > 60) {
                h=parseInt(i/60);
                i = parseInt(i%60);
            }
        }
        // 补零
        var zero=function(v){
            return (v>>0)<10?"0"+v:v;
        };
        return [zero(h),zero(i),zero(s)].join(":");
    };
    // 添加事件的点击按钮
    function btnadd() {
     /*   ymlaudio.pause();*/
        $(".audio_add").hide();
        $("#ymlhands222").hide();
        $("#ymlhands").hide();
        $('.event').attr('class','event');
        $('.bg').attr('class','bg');
    }
    // 将图片异步上传的方法
    function uploadPic() {
        Dopen("图片上传中 请稍等","h1n2");
        var options={
            url:"/upload/uploadPic2",
            type:"post",
            dataType:"text",
            success:function(data){
                Dclo("h1n2");
                // 图片回显
                $("#imgurl22").val(data[0]);
                for(var i =0;i<data.length;i++){
                    coureitemlist+=data[i];
                }
            }
        }
        $("#inputForm").ajaxSubmit(options);
    }
    // 从往上找的 将图片input框进行清空的方法
    Array.prototype.remove=function(obj){
        for(var i =0;i <this.length;i++){
            var temp = this[i];
            if(!isNaN(obj)){
                temp=i;
            }
            if(temp == obj){
                for(var j = i;j <this.length;j++){
                    this[j]=this[j+1];
                }
                this.length = this.length-1;
            }
        }
    }

    /*添加音频的方法*/
    function addcourseitemaudio2() {
        $(".icon-close").trigger("click");
        $(".icon-upclose").trigger("click");
        $(".upload").hide();
       $(".audio_add").show();
    }
    //音频上传按钮的单机事件
    function hidefile(){
        $("#ymladdaudio").hide();
    }

    function showfile(){
        $("#ymladdaudio").show();
    }
    //TODO 后期记得做校验
    // 进行提交的事件
    function beikewanbi(){
        // 需要获取到的有 当前课程的id  顶上的图片集合的id
        //先获取值
        // 对所有的次数进行判定
        var flag =true;
        if(flag){
            var courseitemsids=$("#list1SortOrder").val();
            var courseitemsids2=$("#list2SortOrder").val();
            window.location.href="${pageContext.request.contextPath}/admin/business/course/savacourseitem?id=${course.id}&courseitemsids="+courseitemsids+"&courseitemsids2="+courseitemsids2;
        }

    }
    //确定移动的单击事件
    function quedingyidong(){
        Dopen("正在上传中 请耐心等待一会儿","h1n3");
        var courseitemsids=$("#list1SortOrder").val();
        var courseitemsids2=$("#list2SortOrder").val();
        var url = "${pageContext.request.contextPath}/admin/business/course/savacourseitem2";
        var param = {"id":${course.id},"courseitemsids":courseitemsids,"courseitemsids2":courseitemsids2};
        $.post(url,param,function(data){
            Dclo("h1n3");
            chushihua();
        });
    }
    // 当前页面中间播放按钮的消失事件
    function xiaoshi(){
        $(".audio-mask").hide();
    }
    // 图片的单机事件
    function addaudio(id){
        // 需要将当前页面的图片src 属性替换掉
            // 将音频播放的时间 设置成0
        $("#currenttime").html("00:00:00");
        $("#audio_play").show();
        ymlaudio="";
        courseaudionum=0;
        courseitemseconds=0;
        jushoucishu=1;
        tiwencishu=1;
        ymlxiaohua=1;
        ymlgushi=1;
        $("#play_group").html("");
        $("#ymlwrapper").html("");
        $("#ymlclear").html("");
        $("#audio").html("");
        allsj.splice(0,allsj.length);
        //在这个里面进行动态的展示该图片下的音频文件
        // 还要加载 所有的事件
        var url ="${pageContext.request.contextPath}/admin/business/courseitemaudio/findaudiobycourseitem";
        var param ={"courseItem.id":id};
        $.post(url,param,function (data) {
            // 动态的 拼接当前图片的属性
            $("#pic").children("img").attr("src",data.src);

            var total= "<div class='page'><span class='num'>"+data.zhangshu+"</span>/<span class='total'>"+data.zongshu+"</span></div>";
            $("#pic").append(total);
            var tiwen =  "<div id='videoInnerBar' class='controlInner'></div>";

            courseitemseconds=data.time;
            $("#alltime").html(formatTime(data.time));
            var sj = data.time;
            // 在这个里面进行计算当前剩余的次数
            // <li>
            //<p>27<span>次</span></p>
            // <p>举手剩余</p>
            //  </li>
            // 每个数字拼接上去的时候 要做一个判断 小于等于0 的时候要拼接成红色的数字

            var  al ="";
           if(data.tiwencishu2>0){
                al+= "<li>";
               al += "<p><span style='color:#333;'>" + data.tiwencishu2 + "</p>";
               al += "<p>提问剩余</p></li>";
                /*$("#ymlclear").append(htmltiwen);*/
            }else{
                var bbb=Math.abs(data.tiwencishu2);
                al+= "<li>";
               al += "<p><span style='color:#00735c;'>" + bbb + "</p>";
               al += "<p>提问剩余</p></li>";
               /* $("#ymlclear").append(htmltiwen);*/
            }
            if(data.jushoucishu2>0) {
                al += "<li>";
                al += "<p><span style='color:#333;'>" + data.jushoucishu2 + "</p>";
                al += "<p>举手剩余</p></li>";
              /*  $("#ymlclear").append(htmljushou);*/
            }else{
                var ccc=Math.abs(data.jushoucishu2);
                al += "<li>";
                al += "<p><span style='color:#00735c;'>" + ccc + "</p>";
                al += "<p>举手剩余</p></li>";
               /* $("#ymlclear").append(htmljushou);*/
            }
            if(data.xiaohua2>0) {
                al+= "<li>";
                al += "<p><span style='color:#333;'>" + data.xiaohua2 + "</p>";
                al += "<p>笑话剩余</p></li>";
                /*$("#ymlclear").append(htmlxiaohua);*/
            }else{
                var ddd=Math.abs(data.xiaohua2);
                al += "<li>";
                al += "<p><span style='color:#00735c;'>" + ddd + "</p>";
                al += "<p>笑话剩余</p></li>";
              /*  $("#ymlclear").append(htmlxiaohua);*/
            }
            if(data.gushi2>0) {
                al += "<li>";
                al += "<p><span style='color:#333;'>" + data.gushi2 + "</p>";
                al += "<p>故事剩余</p></li>";
             /*   $("#ymlclear").append(htmlgushi);*/
            }else{
                var fff=Math.abs(data.gushi2);
                al += "<li>";
                al += "<p><span style='color:#00735c;'>" +fff + "</p>";
                al += "<p>故事剩余</p></li>";
                /*$("#ymlclear").append(htmlgushi);*/
            }


            $("#ymlclear").html(al);
            allsj.push(data.courseItemEventVOS);


            if(data.audiolist==null){
                var html='<script>\$( function() { \$( "#audio'+i+'" ).audioPlayer(); } );<\/script>';
                $("#play_group").html(html);
            }
            for(var i=0;i<data.audiolist.length;i++) {
                var html='<div class="play1">';
                html += '<span class="f1">'+ data.audiolist[i].remarks+'</span>'
                    +'<audio class="fl" preload="auto" controls  id="audio'+i+'" onpause="yzanting(this)" ontimeupdate="jianting(this,'+i+')">'
                    +'<source src="' + data.audiolist[i].audioUrl + '" />'
                    +'</audio>'
                    +'<input class="fl" type="checkbox" class="checkbox" value="'+data.audiolist[i].id+'" name="checkbox1">'
                    +'<script>\$( function() { \$( "#audio'+i+'" ).audioPlayer(); } );<\/script>'
                    +'</div>';
                $("#play_group").html(html);
            }
            //接下来就是动态的进行展示事件了
            // 总的循环

            for(var j=0;j<data.courseItemEventVOS.length;j++){
                // 先要对事件详情进行判定
                if(data.courseItemEventVOS[j].type==0){
                    var px2=0;
                    if(data.courseItemEventVOS[j].seconds<=0){
                         px2=-15;
                    }else{
                        px2=(data.courseItemEventVOS[j].seconds/sj)*($("#ymlwrapper").width()+16);// 当前的宽度值
                        px2 =parseInt(px2);

                    }

                    tiwen+='<div id="event'+data.courseItemEventVOS[j].id+'" class="s_event clear test" ondblclick="bianji(this)"  onmouseup="gaibian(this)" >'
                        +'<img src="${ctxStatic}/iframe0/images/test.png" alt="" width="100%">'
                        +'<span>提问<i>'+tiwencishu+'</i></span>'
                        +'<input type="hidden" name="jseventcaseid" value="'+data.courseItemEventVOS[j].id+'">'
                        +'<input type="hidden" name="jseventcasetype" value="'+data.courseItemEventVOS[j].type+'">'
                        +'</div>';
                   /* $("#ymlwrapper").append(tiwen);*/
                    tiwencishu=tiwencishu+1;
                    var offsettop=$("#ymlwrapper").offset().top;
                    var offsetleft=$("#ymlwrapper").offset().left;
                    $("#event"+data.courseItemEventVOS[j].id).css({position: "relative",height:"60px",cursor: "move",'left':px2,'z-index':0});
                }
                if(data.courseItemEventVOS[j].type==1) {
                    // 求出当前的总的px
                    var px3=0;
                    if(data.courseItemEventVOS[j].seconds<=1){
                        px3=-15;
                    }else {
                        px3 = (data.courseItemEventVOS[j].seconds / sj) * ($("#ymlwrapper").width() + 16);
                        px3 = parseInt(px3);
                    }
                    tiwen+= '<div class="s_event clear hands" style="position: absolute; height:60px; cursor: move; left: '+px3+'px; z-index: 0;" ondblclick="bianji(this)" onmouseup="gaibian(this)">'
                        + '<img src="${ctxStatic}/iframe0/images/hands.png" alt="" width="100%">'
                        + '<input type="hidden" id="' + data.courseItemEventVOS[j].id + '" name="jseventcaseid" value="' + data.courseItemEventVOS[j].id + '">'
                        + '<input type="hidden"  name="jseventcasetype" value="' + data.courseItemEventVOS[j].type + '">'
                        + '<span>举手<i>' + jushoucishu + '</i></span>'
                        + '</div>';
                  /*  $("#ymlwrapper").append(jushou);*/
                    jushoucishu=jushoucishu+1;
                }
                if(data.courseItemEventVOS[j].type==2) {
                    var px4=0;
                    if(data.courseItemEventVOS[j].seconds<=1){
                        px4=-15;
                    }else {
                        px4 = (data.courseItemEventVOS[j].seconds / sj) * ($("#ymlwrapper").width() + 16);
                        px4 = parseInt(px4);
                    }
                    tiwen += '<div class="s_event clear smile" style="position: absolute; height:60px; cursor: move; left: '+px4+'px; z-index: 0;" ondblclick="bianji(this)" onmouseup="gaibian(this)">'
                        + '<img src="${ctxStatic}/iframe0/images/smile.png" alt="" width="100%">'
                        + '<input type="hidden" id="' + data.courseItemEventVOS[j].id + '" name="jseventcaseid" value="' + data.courseItemEventVOS[j].id + '">'
                        + '<input type="hidden"  name="jseventcasetype" value="' + data.courseItemEventVOS[j].type + '">'
                        + '<span>笑话<i>' + ymlxiaohua + '</i></span>'
                        + '</div>';
                    /*$("#ymlwrapper").append(xiaohua);*/
                    ymlxiaohua=ymlxiaohua+1;
                }
                if(data.courseItemEventVOS[j].type==3) {
                    // 求出当前的总的px
                    var px5=0;
                    if(data.courseItemEventVOS[j].seconds<=1){
                        px5=-15;
                    }else {
                        px5 = (data.courseItemEventVOS[j].seconds / sj) * ($("#ymlwrapper").width() + 16);
                        px5 = parseInt(px5);
                    }
                    tiwen+= '<div class="s_event clear story" style="position: absolute; height:60px; cursor: move; left: '+px5+'px; z-index: 0;" ondblclick="bianji(this)" onmouseup="gaibian(this)">'
                        + '<img src="${ctxStatic}/iframe0/images/story.png" alt="" width="100%">'
                        + '<input type="hidden" id="' + data.courseItemEventVOS[j].id + '" name="jseventcaseid" value="' + data.courseItemEventVOS[j].id + '">'
                        +'<input type="hidden"  name="jseventcasetype" value="' + data.courseItemEventVOS[j].type + '">'
                        + '<span>故事<i>' + ymlgushi + '</i></span>'
                        + '</div>';
                   /* $("#ymlwrapper").append(gushi);*/
                    ymlgushi=ymlgushi+1;
                }
                // $("#ymlwrapper").html(tiwen);
                // $("#event"+data.courseItemEventVOS[j].id).attr("style","position: absolute; cursor: move; left: "+px2+"px;  z-index: 0;");
            }
            $("#ymlwrapper").html(tiwen);

            $('.s_event').each(function(){
                $(this).dragging({
                    move : 'x',
                    randomPosition : false
                });
            });

        },"json");
        // 上传图片页面确定按钮的点击事件

    }
    //鼠标弹起事件
    function gaibian(kkk){

        // 获取当前的事件实例中间表的id
        var sc =  $(kkk).children("input[name='jseventcaseid']").val();
        // 先要将改变后的 px 动态的获取到
        var sc2= $(kkk).position().left;
        //还要将像素值 转换成当前播放的时间
        // 获取到总的像素值
        var px =$("#ymlwrapper").width();
        // 计算出来当前的播放的事件
        var shijian = (sc2/px)*courseitemseconds;
        shijian=parseInt(shijian);
        var url="${pageContext.request.contextPath}/admin/business/eventcase/updatacourseitemevent";
        var param={"id":sc,"shijian":shijian};
        $.post(url,param,function(data){

        });

    }
    // 鼠标的双击事件 目的就是就是编辑 或者进行删除
    function bianji(audio) {
        $("#ymlxiayiti23456").show();
        $("#ymlxiayiti23456").css("display","block");
        ymlcourseitemeventid=0;

        ymlbianjiquestionitem.splice(0,ymlbianjiquestionitem.length);
        bianjicishu=0;
        //需要的是当前的事件的事件实例中间表的id
        //添加事件的页面进行回显
        // 接下来就是根据id 去数据库里面进行查询 然后进行回显
        // 先对当前的type进行判定
        //说明是举手或者提问的事件
        var sc  =$(audio).children("input[name='jseventcaseid']").val();
        ymlcourseitemeventid=sc;
        var type = $(audio).children("input[name='jseventcasetype']").val();
        // 根据type来进行判断
        if(type==1){
            var url = "${pageContext.request.contextPath}/admin/business/question/getbyeventcaseid";
            var param={"id":sc};
            $.ajax(url,{
                "type":"post",
                "async":false,
                "data":param,
                "dataType":"json",
                "success":function(data){
                    // 返回的是问题向前的集合
                    // 走的还是之前的方法

                    ymlbianjiquestionitem=data;
                    if(data.length==1){
                      /*  document.getElementById("ymlxiayiti223456").style.display = "none!important";*/
                        $("#ymlxiayiti23456").hide();
                    }else{
                        $("#ymlxiayiti23456").show();
                    }
                    // 接下来就是走回显的方法
                    biaodanhuixian2(ymlbianjiquestionitem[0]);
                }
            });
        }
        if(type==0){
            var url = "${pageContext.request.contextPath}/admin/business/question/getbyeventcaseid";
            var param={"id":sc};
            $.ajax(url,{
                "type":"post",
                "async":false,
                "data":param,
                "dataType":"json",
                "success":function(data){
                    // 返回的是问题向前的集合
                    // 走的还是之前的方法

                    ymlbianjiquestionitem=data;
                    if(data.length==1){
                        $("#ymlxiayiti23456").hide();
                    }else{
                        $("#ymlxiayiti23456").show();
                    }
                    // 接下来就是走回显的方法
                    biaodanhuixian2(ymlbianjiquestionitem[0]);
                }
            });
        }
        //说明这是笑话
        if(type==2){

            var url ="${pageContext.request.contextPath}/admin/business/eventcase/selectJokerByEvcaseid";
            var param = {"id":ymlcourseitemeventid};
            $.ajax(url,{
                "type":"post",
                "async":false,
                "data":param,
                "dataType":"json",
                "success":function(data){
                    //返回的是当前事件实例集合的其中一个对象
                    // 将data填充到用来回显的div中
                    $("#ymltanchaung").html(data.content);
                    $(".tanchuang").show();
                }
            });
        }
        if(type==3){
            var url ="${pageContext.request.contextPath}/admin/business/eventcase/selectStoryByEvcaseid";
            var param = {"id":ymlcourseitemeventid};
            $.ajax(url,{
                "type":"post",
                "async":false,
                "data":param,
                "dataType":"json",
                "success":function(data){
                    //返回的是当前事件实例集合的其中一个对象
                    // 将data填充到用来回显的div中
                    $("#ymltanchaung").html(data.content);
                    $(".tanchuang").show();
                }
            });
        }
    }

    // 监听音频文件播放的事件 timeupdate 这个函数
    function bofang() {
        // 当点击的时候 获取到当前 音频播放事件的音频 进行播放
        /* if(ymlaudio){}*/
        $(".audioplayer-playpause").eq(courseaudionum).trigger("click");
        $("#playBtn").hide();
        $("#pauseBtn").show();
    }
    // 中间进度条的点击进行暂停的方法
    function zanting() {
        $(".audioplayer-playpause").eq(courseaudionum).trigger("click");
        // 当点击的时候 获取到当前 音频播放事件的音频 进行暂停
//        ymlaudio.pause();
        $("#playBtn").show();
        $("#pauseBtn").hide();
    }
    // 先要获取到当前的播放文件的东西
    function jianting(audio,i){
        quanjutimeout=0;
        courseaudionum=i;
        // 先要将当前播放的时间 获取到
        // 监听播放的时间
        //  当前的音频id  播放的时候使用
        $("#playBtn").hide();
        $("#pauseBtn").show();
        ymlaudio=audio;
        var list =allsj[0];
        //  这是遍历的问题的集合
        var qiantime=0;
        if(i!=0){
            for(var l=0;l<i;l++){
                var nextaudio=document.getElementById("audio"+l);
                qiantime+=nextaudio.duration;
            }
        }
        var sj =audio.currentTime+qiantime;
        coureitembofangtime=sj;
        coureitembofangtime = parseInt(coureitembofangtime)
        coureitembofangtime=formatTime(coureitembofangtime);
        $("#currenttime").html(coureitembofangtime);
        // 拿到当前的总的事件
        // 拿到总的像素值
        var width = $("#ymlwrapper").width();
        // 求出当前的px值
        var number = (sj/courseitemseconds)*width;
        // 动态的拼接到 小白点上面
        $("#videoInnerBar").css("left",number-8);
        for(var k=0;k<list.length;k++){
            // 获取时间的时候 要进行判断一下 判断当前播放的是第几个音频
            //  直接获取到 i的前几个元素
            //定义一个变量 用来接收 当前参数的总时间

            if(sj-list[k].seconds>0.5&&sj-list[k].seconds<1){
                quanjutimeout=list[k].showTime*1000;
                audio.pause();
                $("#playBtn").show();
                $("#pauseBtn").hide();
                $("#ymlxiayitia12312312").show();
                /*$(".audioplayer-playpause").trigger("click");*/
                // 先要暂停 然后 进行弹出div
                //这是要发送请求到后台 然后开始弹出div
                //在这里加一层判断 如果是0或者1 进行表单的回显  如果是2或者3 那就进行故事或者笑话的回显
                var type = list[k].type;
                if(type==1||type==0){
                    var id =list[k].id;
                    ymlquestionid=id;
                    ymlcishu=0;
                    var url="${pageContext.request.contextPath}/admin/business/question/getbyeventcaseid";
                    var param={"id":id};
                    $.ajax(url,{
                        "type":"post",
                        "async":false,
                        "data":param,
                        "success":function(data){
                            quanjutime22(quanjutimeout);
                            // 返回的还是集合 用数组来接收
                            ymlquestionlist =data;
                            // 当前的问题的id
                            //然后就是进行回显的方法
                            // 第一次先对用来记录次数 进行清零
                            //判定集合的长度

                            if(data.length==1){

                                $("#ymlxiayitia12312312").hide();
                            }
                            $("input[type=reset]").trigger("click");
                            biaodanhuixian(ymlquestionlist[0]);
                        }
                    });
                }else{
                    // 那么就进行笑话或者故事的回显
                    // 如果是2或者3的话 要分别进行回显
                    if(type==2){
                        //说明这就是笑话 那么就进行回显
                        // 拿着id 去进行请求后台
                        // 然后随便返回一个数据 进行回显
                        // 去后台查询数据
                        var id=list[k].id;
                        var url ="${pageContext.request.contextPath}/admin/business/eventcase/selectJokerByEvcaseid";
                        var param = {"id":id};
                        $.ajax(url,{
                            "type":"post",
                            "async":false,
                            "data":param,
                            "dataType":"json",
                            "success":function(data){
                                quanjutime33(quanjutimeout);
                                //返回的是当前事件实例集合的其中一个对象
                                // 将data填充到用来回显的div中
                                $("#ymltanchaung").html(data.content);
                                $(".tanchuang").show();
                            }
                        });
                    }
                    if(type==3){
                        // 说明这就是故事 那么就进行回显
                        var id=list[k].id;
                        var url ="${pageContext.request.contextPath}/admin/business/eventcase/selectStoryByEvcaseid";
                        var param = {"id":id};
                        $.ajax(url,{

                            "type":"post",
                            "async":false,
                            "data":param,
                            "dataType":"json",
                            "success":function(data){
                                quanjutime33(quanjutimeout);
                                //返回的是当前事件实例集合的其中一个对象
                                // 将data填充到用来回显的div中
                                $("#ymltanchaung").html(data.content);
                                $(".tanchuang").show();
                            }
                        });
                    }
                }
            }
        }
        var allshichang=audio.duration;
        var dtshichang=audio.currentTime;
        if(allshichang-dtshichang<0.4){
            audio.pause();
            // 获取到下一个元素
            i=i+1;
            var nextaudio=document.getElementById("audio"+i);
            nextaudio.play();
        }
    }
    // 进度条的播放还有暂停的方法
    function yzanting() {
        $("#playBtn").show();
        $("#pauseBtn").hide();
    }
    // 添加事件的时候要让当前的播放的音频进行暂停
    function tanchuanyincang(){
        quxiaodingshiqi2();
        $(".tanchuang").hide();
        // 还要让当前的音频进行播放
        var shijian =ymlaudio.currentTime;
        // 设置播放事件
        ymlaudio.currentTime=shijian+0.5;
        /*  $(".audioplayer-playpause").eq(courseaudionum).trigger("click");*/
        ymlaudio.play();
    }
    // 回显页面的 下一题按钮
    function ymlxiayiti() {
        // 先将定时器清空
        quxiaoshowqueation();
        ymlcishu=ymlcishu+1;
        //当这个按钮被点击的时候 要将上一个元素进行清空
        // 主要是将元素的角标进行清空
        $("#ymlbiaoti").val("");
        $("#ymlcontentA").val("");
        $("#ymlcontentB").val("");
        $("#ymlcontentC").val("");
        $("#ymlcontentD").val("");
        $("#ymlcontentA2").val("");
        $("#ymlcontentB2").val("");
        $("#ymlcontentC2").val("");
        $("#ymlcontentD2").val("");
        // 将问题集合的第一个元素进行清空
        /*  ymlquestionlist.remove(ymlcishu-1);*/
        // 对集合的长度进行判定
        ymlquestionlist.splice(0,1);
        if(ymlquestionlist.length==1){
            $("#ymlxiayitia12312312").hide();
        }
        biaodanhuixian(ymlquestionlist[0]);

    }
    // 进行提交的方法(回显页面的)
    function ymltijiao(){
        // 将表单进行清空
        $("#ymlbiaoti").val("");
        $("#ymlcontentA").val("");
        $("#ymlcontentB").val("");
        $("#ymlcontentC").val("");
        $("#ymlcontentD").val("");
        $("#ymlcontentA2").val("");
        $("#ymlcontentB2").val("");
        $("#ymlcontentC2").val("");
        $("#ymlcontentD2").val("");
        // 当点击提交之后 要记得 将页面进行关闭哦
        //将定时器进行清空
        quxiaodingshiqi();
        // 重新播放音频
        var shijian =ymlaudio.currentTime;
        // 设置播放事件
        ymlaudio.currentTime=shijian+0.5;
        ymlaudio.play();
        $("#ymlhands").css("display","none");
        $(".icon-close").trigger("click");
    }
    // 包含编辑功能的下一题方法
    function ymlxiayiti2(){
         bianjicishu=bianjicishu+1;
        // 需要将先前的元素进行移除 然后返回第一个元素进行天聪
        ymlbianjiquestionitem.splice(0,1);
        if(ymlbianjiquestionitem.length==1){
            // 设置下一题按钮 不可见
            $("#ymlxiayiti23456").hide();
        }else{
            $("#ymlxiayiti23456").show();
        }
        // 要将内容进行封装 然后更新到数据库
        /// 改变的是questionOption的内容还有就是 标题的内容 questionItem的
        //先要进行判断是单选还是多选
        var danxuan1 = $('input[name="danxuan222"]').filter(':checked').val();
        var content = $("#ymlbiaoti22").val();
        //如果单选
        if(danxuan1==0){
            // 如果单选被选中那么就将单选的表单进行提交
            // 对各种类型进行提交
            // 对时长进行封装 单位秒
            $("#dxymlquestionitem").val(ymlquestionitemid);
            //还要封装一下 questionitem的标题
            $("#questionitemcontent").val(content);
            var formparam=  $("#ymldanxuanti2").serialize();
            //发送异步请求
            var url ="${pageContext.request.contextPath}/admin/business/question/updatedanxuanti";
            $.post(url,formparam,function(data){
                //将当前的表单页面进行刷新
                // 说白了就是将表单的值进行清空
                // 接下来就是对问题的id进行赋值 利用全局变量来完成
           /*     $("input[type=reset]").trigger("click");*/
                // 将标题进行清空
                $("#ymlbiaoti22").val("");
                biaodanhuixian2(ymlbianjiquestionitem[0]);
            },"json");
        }else{
            // 先要判断当前的答案被选了没有
            // 先获取当前的四个答案是否被选中
           /* var daan =[];
            var A= $('input:checkbox[name="zhengqueckeckA"]:checked').val();
            if(A!=null&&A!=""){
                daan.push(A);
            }
            var B= $('input:checkbox[name="zhengqueckeckB"]:checked').val();
            if(B!=null&&B!=""){
                daan.push(B);
            }
            var C= $('input:checkbox[name="zhengqueckeckC"]:checked').val();
            if(C!=null&&C!=""){
                daan.push(C);
            }
            var D= $('input:checkbox[name="zhengqueckeckD"]:checked').val();
            if(D!=null&&D!=""){
                daan.push(D);
            }*/
            /*if(daan.length<2){
             alert("请至少选择两个答案");
             return false;
             }*/

            //当前的问题详情的id
            $("#questionitem32").val(ymlquestionitemid);
            // 还要将当前的问题详情的标题进行封装、
            $("#questionitemcontent2").val(content);
            // 将表单进行 异步提交
            //序列化之后的表单
            var formparam=  $("#ymlduoxuanti2").serialize();
            //发送异步请求
            var url ="${pageContext.request.contextPath}/admin/business/question/updateduoxuanti";
            $.post(url,formparam,function(data){
                //将当前的表单页面进行刷新
                // 说白了就是将表单的值进行清空
                // 接下来就是对问题的id进行赋值 利用全局变量来完成
                $("input[type=reset]").trigger("click");
                // 将标题进行清空
                $("#ymlbiaoti22").val("");
                biaodanhuixian2(ymlbianjiquestionitem[0]);
            },"json");
        }

    }
    // 编辑功能页面的 提交方法
    function ymltijiao2() {
        // 这是编辑页面功能的提交方法
        var danxuan1 = document.getElementById("ymldanxuan22");
        var content = $("#ymlbiaoti22").val();

        //如果单选
        if(danxuan1.checked){
            // 如果单选被选中那么就将单选的表单进行提交
            // 对各种类型进行提交
            // 对时长进行封装 单位秒
            $("#dxymlquestionitem").val(ymlquestionitemid);
            //还要封装一下 questionitem的标题
            $("#questionitemcontent").val(content);
            var A= $('input:radio[name="zhengqueselect"]:checked').val();
            /* if(A==undefined){
             alert("请选择答案");
             return false;
             }*/
            // 将表单进行 异步提交
            //序列化之后的表单
            var formparam=  $("#ymldanxuanti2").serialize();
            //发送异步请求
            var url ="${pageContext.request.contextPath}/admin/business/question/updatedanxuanti";
            $.post(url,formparam,function(data){
                //将当前的表单页面进行刷新
                // 说白了就是将表单的值进行清空
                // 接下来就是对问题的id进行赋值 利用全局变量来完成
                $("input[type=reset]").trigger("click");
                // 将标题进行清空
                $("#ymlbiaoti22").val("");
                // 设置 当前的div 隐藏
                $("#ymlhands222").hide();
                $(".icon-close").trigger("click");
            },"json");
        }else{
            // 先要判断当前的答案被选了没有
            // 先获取当前的四个答案是否被选中
            var daan =[];
            var A= $('input:checkbox[name="zhengqueckeckA"]:checked').val();
            if(A!=null&&A!=""){
                daan.push(A);
            }
            var B= $('input:checkbox[name="zhengqueckeckB"]:checked').val();
            if(B!=null&&B!=""){
                daan.push(B);
            }
            var C= $('input:checkbox[name="zhengqueckeckC"]:checked').val();
            if(C!=null&&C!=""){
                daan.push(C);
            }
            var D= $('input:checkbox[name="zhengqueckeckD"]:checked').val();
            if(D!=null&&D!=""){
                daan.push(D);
            }
            /*if(daan.length<2){
             alert("请至少选择两个答案");
             return false;
             }*/
            //当前的问题详情的id
            $("#questionitem32").val(ymlquestionitemid);
            // 还要将当前的问题详情的标题进行封装、
            $("#questionitemcontent2").val(content);
            // 将表单进行 异步提交
            //序列化之后的表单
            var formparam=  $("#ymlduoxuanti2").serialize();
            //发送异步请求
            var url ="${pageContext.request.contextPath}/admin/business/question/updateduoxuanti";
            $.post(url,formparam,function(data){
                //将当前的表单页面进行刷新
                // 说白了就是将表单的值进行清空
                // 接下来就是对问题的id进行赋值 利用全局变量来完成
                $("input[type=reset]").trigger("click");
                // 将标题进行清空
                $("#ymlbiaoti22").val("");
                // 设置当前的div隐藏
                $("#ymlhands222").hide();
                $(".icon-close").trigger("click");
            },"json");
        }
    }
    // 删除当前事件的 方法 直接获取到当前的时间实例的 然后去进行删除
    function ymldeleteall(){
        //直接获取到当前的 事件实例中间表的id  然后去进行删除
        // 发送请求道后台  然后删除 然后 隐藏页面
        var url ="${pageContext.request.contextPath}/admin/business/question/deltetcourseitemevent";
        var param = {"id":ymlcourseitemeventid};
        $.ajax(url,{
            "type":"post",
            "async":false,
            "data":param,
            "dataType":"json",
            "success":function(data){
                // 返回的是问题向前的集合
                $("#ymlhands222").hide();
                $(".tanchuang").hide();
                $(".icon-close").trigger("click");
                // 需要重新加载次当前页面点击事件
                var itemid = $("#pic").children("img").attr("alt");
                addaudio(itemid);
            }
        });
    }
    // 表单进行回显的方法
    function biaodanhuixian(data){

        $("#ymlbiaoti").val("");
        $("#ymlcontentA").val("");
        $("#ymlcontentB").val("");
        $("#ymlcontentC").val("");
        $("#ymlcontentD").val("");
        $("#ymlcontentA2").val("");
        $("#ymlcontentB2").val("");
        $("#ymlcontentC2").val("");
        $("#ymlcontentD2").val("");
        $("input[type=reset]").trigger("click");
        var questionitem = data;
        if(questionitem.type==0){
            //说明是单选  那就让单选的按钮进行选中
            $("#ymldanxuan").attr("checked",true);
            $("#ymllist1").show();
            $("#ymllist2").hide();
            // 将表单的数据进行回填
            $("#ymlbiaoti").val(questionitem.content);
            // 进行选项的回填
            $("#ymlshoutime").val(questionitem.showTime);
            var option=questionitem.questionOptions;
            for(var u=0;u<4;u++){
                if(option[u].questionOption=="A"){
                    $("#ymlcontentA").val(option[u].content);
                }
                if(option[u].questionOption=="B"){
                    $("#ymlcontentB").val(option[u].content);
                }
                if(option[u].questionOption=="C"){
                    $("#ymlcontentC").val(option[u].content);
                }
                if(option[u].questionOption=="D"){
                    $("#ymlcontentD").val(option[u].content);
                }
            }
            var time = data.showTime*1000;
            showonequestion(time);
            ymlhand2();

        }
        if(questionitem.type==1){
            //说明是多选  那就让多选的按钮进行选中
            $("#ymlduoxuan").attr("checked",true);
            $("#ymllist2").show();
            $("#ymllist1").hide()
            // 将表单的数据进行回填
            $("#ymlbiaoti").val(questionitem.content);  //
            // 进行选项的回填
            $("#ymlshoutime2").val(questionitem.showTime);
            var option=questionitem.questionOptions;
            for(var t =0;t<4;t++){
                if(option[t].questionOption=="A"){
                    $("#ymlcontentA2").val(option[t].content);
                }
                if(option[t].questionOption=="B"){
                    $("#ymlcontentB2").val(option[t].content);
                }
                if(option[t].questionOption=="C"){
                    $("#ymlcontentC2").val(option[t].content);
                }
                if(option[t].questionOption=="D"){
                    $("#ymlcontentD2").val(option[t].content);
                }
            }
            var time = data.showTime*1000;
            showonequestion(time);
            ymlhand2();

        }
    }
    // 表单进行回显的方法(含编辑的功能)
    function biaodanhuixian2(data){
        ymlquestionitemid=null;
        ymlquestionoptionid=null;
        $("#ymlbiaoti22").val("");
        $("#dxymlcontentA").val("");
        $("#dxymlcontentB").val("");
        $("#dxymlcontentC").val("");
        $("#dxymlcontentD").val("");
        $("#ymlcontentA32").val("");
        $("#ymlcontentB32").val("");
        $("#ymlcontentC32").val("");
        $("#ymlcontentD32").val("");
        $("input[type=reset]").trigger("click");
        var questionitem = data;
        ymlquestionitemid=questionitem.id;
        if(questionitem.type==0){
            //说明是单选  那就让单选的按钮进行选中
            $("#ymldanxuan22").attr("checked",true);
            $("#dxymllist").show();
            $("#dxymllist2").hide();
            // 将表单的数据进行回填
            $("#ymlbiaoti22").val(questionitem.content);
            // 进行选项的回填
            $("#ymlshoutime").val(questionitem.showTime);
            var option=questionitem.questionOptions;
            for(var u=0;u<4;u++){
                if(option[u].questionOption=="A"){
                    $("#dxymlcontentA").val(option[u].content);
                }
                if(option[u].questionOption=="B"){
                    $("#dxymlcontentB").val(option[u].content);
                }
                if(option[u].questionOption=="C"){
                    $("#dxymlcontentC").val(option[u].content);
                }
                if(option[u].questionOption=="D"){
                    $("#dxymlcontentD").val(option[u].content);
                }
            }
            //这里是进行表单显示的方法
            ymlbianji2();

        }
        if(questionitem.type==1){
            //说明是多选  那就让多选的按钮进行选中
            $("#ymlduoxuan22").attr("checked",true);
            $("#dxymllist2").show();
            $("#dxymllist").hide()
            // 将表单的数据进行回填
            $("#ymlbiaoti22").val(questionitem.content);  //
            // 进行选项的回填
            $("#ymlshoutime2").val(questionitem.showTime);
            var option=questionitem.questionOptions;

            for(var t =0;t<4;t++){
                if(option[t].questionOption=="A"){
                    $("#ymlcontentA32").val(option[t].content);
                }
                if(option[t].questionOption=="B"){
                    $("#ymlcontentB32").val(option[t].content);
                }
                if(option[t].questionOption=="C"){
                    $("#ymlcontentC32").val(option[t].content);
                }
                if(option[t].questionOption=="D"){
                    $("#ymlcontentD32").val(option[t].content);
                }
            }

        }
        ymlbianji2();
    }
    //上传页面 确定的按钮的点击事件
    function addcourseitem(){
        //当点击确定的时候 发送请求到后台
        //参数  当前被选中图片的相关字段 已经添加的图片的地址
        // 被选中的图片的id
        var content = $("#content").val();
        if(content==""){
            alert("请先填写标题");
            return false;
        }
        var shangchuan = $("#imgurl22").val();
        if(shangchuan==""){
            alert("请选择一张图片");
            return false;
        }

        var xuanzhong=$("#pic").children("img").attr("alt")
        // 上传图片的地址
       /* if(xuanzhong==""){
            alert("请先点击下图片在上传");
            return false;
        }*/
        // 上传图片的标题

        var  url = "${pageContext.request.contextPath}/admin/business/courseitem/savecourseitem";
        var param = {"xuanzhong":xuanzhong,"shangchuan":shangchuan,"content":content,"courseid":${course.id},"coureitemlist":coureitemlist};
        $.post(url,param,function (data) {
            chushihua();
        },"json");
    }
    // 删除页面的点击事件
    function deletecourseitem(){
        // 当点击的时候 需要做的就是将图片的信息上传过去 将图片的外键滞空
        var xuanzhong=$("#pic").children("img").attr("alt");
        window.location.href="${pageContext.request.contextPath}/admin/business/courseitem/deletecourseitem?xuanzhong="+xuanzhong;
    }
    //复制页面按钮点击事件
    function copypage(){
        //当点击的时候  就做判断当前图片有没有被选中
        var at = $("#pic").children("img").attr("alt");
        if(at!=""&&at!=undefined){
            copyid = at;
            alert("已选中 请点击粘贴按钮")
        }else{
            alert("请先选中一张图片")
        }
    }
    // 粘贴页面点击事件
    function pastepage(){
        // 当粘贴的时候  就是把之前的选中的页面  插入到当前选中的图片后面
        // 获取到当前选中图片的id
        if(copyid!=undefined){
        var dangqian = $("#pic").children("img").attr("alt");
        window.location.href="${pageContext.request.contextPath}/admin/business/courseitem/pastepage?copyid="+copyid+"&dangqianid="+dangqian;
        }else{
            alert("请先选取页面");
            return false;
        }

    }
    // 音频上传事件
    function uploadVidio() {
        Dopen("音频正在上传中  请等待","h1n1");
        //当触发这个事件的时候 要注意不能 让上传的按钮 不可用
        $("#ymluploadaudio").hide();
        var options={
            url:"/upload/uploadVidio2",
            type:"post",
            dataType:"text",
            success:function(data){
                 Dclo("h1n1");
                $("#ymluploadaudio").show();
                // 将录音的路径进行保存

                $("#addaudio").val(data);
                $("#source").attr("src",data);
            }
        }
        $("#inputForm2").ajaxSubmit(options);
    }
    //确定上传的单击事件
    function addcourseitemaudio() {
        // 先要判断是哪个音频按钮被选中了
        // 先要看看音频对象是不是空的

        var time ;
        var value =  $('#wrap input[name="payMethod"]:checked ').val();
            var audio = document.getElementById("source");
            time = audio.duration;
            time = parseInt(time);

        // 先要获取到当前已经被选中的图片 还有就是上传图片的路径 以及content
        //获取当前选中的图片
        var itemid =$("#pic").children("img").attr("alt");
        //获取当前上传的音频的路径

        // 还需要获取到当前的 总的时长  然后上传上去
        //获取当前的音频标题
        var audiocontent=$("#audiocontent").val();
        if(audiocontent==""){
            alert("请先填写标题");
            return false;
        }
        var itemaudioid=$("#addaudio").val();
        if(itemaudioid==""){
            alert("请先填写音频文件");
            return false;
        }
        var url ="${pageContext.request.contextPath}/admin/business/courseitemaudio/addaudio";
        var param = {"itemid":itemid,"itemaudioid":itemaudioid,"audiocontent":audiocontent,"courseid":${course.id},"time":time};
        $.post(url,param,function (data) {
            $("#audiocontent").val("");
            var obj = document.getElementById('ymladdaudio') ;
            obj.outerHTML=obj.outerHTML;
            //将页面隐藏 将audio标签的src 属性去掉 设置div 隐藏
            $(".audio_add").hide();
            $("#source").attr("src","");
            $(".icon-audioclose").trigger("click")
            if(data==0){
                chushihua();
            }else{
                addaudio(data);
            }
        },"json");
    }
    // 删除选中的音频文件
    function removeaudio(){
       $(".audio-mask").show();
       $(".audio-mask .delete").show();
    }
    //删除当前音频的方法
    function ymldeleteaudio() {
        // 先要获取到 当前的图片文件的对象
        var itemid=$("#pic").children("img").attr("alt");
        // 先要获取到当前选中的音频文件
        var k=$("input[type='checkbox']:checked").length;
        if (k<=0) alert("请先勾选")
        else {
            var chk_value ="";
            $('input[name="checkbox1"]:checked').each(function(){
                chk_value+=","+($(this).val());
            });
            chk_value=chk_value.substring(1);
            var url = "${pageContext.request.contextPath}/admin/business/courseitemaudio/removecourseitemaudio";
            var param = {"ids":chk_value,"courseitemid":itemid,"courseid":${course.id}};
            $.post(url,param,function (data) {
                $(".audio-mask").hide();
                if(data==0){
                    chushihua();
                }else{
                    addaudio(data);
                }


            },"json");
            /* $.ajax(url,{
             "type":"post",
             "async":false,
             "data":param,
             "dataType":"json",
             "success":function(data){
             addaudio(itemid);
             }
             });*/
            /*  window.location.href="/admin/business/courseitemaudio/removecourseitemaudio?ids="+chk_value+"&courseitemid="+itemid;*/

        }
    }
    //添加举手事件的入口
    function hand2() {
        $("input[type=reset]").trigger("click");
        // 将标题进行清空
        $("#biaoti").val("");
        // 要将表单的数据进行清空
        $('.Handsupd').attr('class','Handsupd');
        $('.bg').attr('class','bg');
        $(".rad-danxuan").click(function(){
            $('.list1').show();$('.list2').hide();
        })
        $(".rad-duoxuan").click(function(){
            $('.list2').show();$('.list1').hide();
        })
        $("#ymlhide").show();
    }
    // 添加测试事件的入口
    function test2(){
        $("input[type=reset]").trigger("click");
        // 将标题进行清空
        $("#biaoti").val("");

        $(".rad-danxuan").click(function(){
            $('.list1').show();$('.list2').hide();
        })
        $(".rad-duoxuan").click(function(){
            $('.list2').show();$('.list1').hide();
        })
        $('.Handsupd').attr('class','Handsupd');
        $('.bg').attr('class','bg');
        $("#ymlhide").show();
    }

    // 课程上显示问题的方法
    function ymlhand2() {
        $("#ymlhands222").css("display","none");
        $(".btn_add").trigger("click");
        $("#ymlhands").css("display","block");
    }
    // 编辑页面的div 显示的方法
    function ymlbianji2(){
        $("#ymlhands").css("display","none");
        $(".btn_add").trigger("click");
        $("#ymlhands222").css("display","block");
    }
    //添加事件的确定按钮的单击事件
    function shijian(){
        // 在这之前要确定的一件事情就会 当前的音频要暂停
        // TODO 改完样式之后要记得不仅要获取到当前的播放时间 还要将当前的音频暂停掉
        // 先要判断哪个按钮被选择了
        var value=$("input:radio[name='Fruit']:checked").val();

        if(value==1){
            $("#hand").trigger("click");
            textorhand =value;
        }
        if(value==0){
            $("#test").trigger("click");
            textorhand =value;
        }
        /*说明这是笑话*/
        if(value==2){
            // 直接去请求后台 记得最后要刷新页面
            // 获取当前的图片
            var itemid = $("#pic").children("img").attr("alt");
            // 还要获取到当前播放的音频的时长
            // 先获取到当前小白点儿的位置

            var px =$("#ymlwrapper").width();
            var sc2= $("#videoInnerBar").position().left;
            var seconds = (sc2/px)*courseitemseconds;
            seconds = parseInt(seconds);
            //发送请求到后台
            var url="${pageContext.request.contextPath}/admin/business/question/addjoker";
            var param={"itemid":itemid,"seconds":seconds,"courseid":${course.id}};
            $.post(url,param,function(data){
                // 发送请求到后台 然后重新刷新
                // 设置当前的图片被点击一次
                $(".icon-close").trigger("click");
                if(data==0){
                    chushihua();
                }else {
                    addaudio(data);
                }
            },"json");
        }

        if(value==3){
            // 直接去请求后台 记得最后要刷新页面
            // 获取当前的图片
            var itemid = $("#pic").children("img").attr("alt");
            // 还要获取到当前播放的音频的时长
            var px =$("#ymlwrapper").width();
            var sc2= $("#videoInnerBar").position().left;
            var seconds = (sc2/px)*courseitemseconds;
            seconds = parseInt(seconds);
            //发送请求到后台
            var url="${pageContext.request.contextPath}/admin/business/question/addgushi";
            var param={"itemid":itemid,"seconds":seconds,"courseid":${course.id}};
            $.post(url,param,function(data){
                // 发送请求到后台 然后重新刷新
                // 设置当前的图片被点击一次
                $(".icon-close").trigger("click");
                if(data==0){
                    chushihua();
                }else {
                    addaudio(data);
                }
            },"json");
        }
    }
    // 添加问题时候的下一题的按钮
    function xiayiti(){
        alert(11);
        //当点击这个按钮的时候 先要判断出来 是单选还是多选 然后再进行提交和进行判断
        // 先判断是多选还是单选

        var danxuan1 = document.getElementById("danxuan");
        var ymlduoxuan22 =document.getElementById("duoxuan");

        if(danxuan1.checked){
            // 如果单选被选中那么就将单选的表单进行提交
            // 对各种类型进行提交
            // 对时长进行封装 单位秒

            var A= $('input:radio[name="zhengqueselect"]:checked').val();
            if(A==undefined){
                alert("请选择答案");
                return false;
            }
            var px =$("#ymlwrapper").width();
            var sc2= $("#videoInnerBar").position().left;
            var seconds = (sc2/px)*courseitemseconds;
            var  shichang = parseInt(seconds);
            $("#shichang").val(shichang);
            // 问题类型进行封装
            $("#handortest").val(textorhand);
            //封装问题详情的标题
            var biaoti = $("#biaoti").val();
            // 当前课程的id
            var courseid=${course.id}
                $("#courseid").val(courseid);
            $("#content2").val($("#biaoti").val());
            //封装当前被选中的图片
            $("#itemid").val($("#pic").children("img").attr("alt"))
            // 封装当前的问题的id
            $("#question").val(questionid);
            // 将表单进行 异步提交
            //序列化之后的表单
            var formparam=  $("#danxuanti").serialize();
            //发送异步请求
            var url ="${pageContext.request.contextPath}/admin/business/question/danxuanti";
            $.post(url,formparam,function(data){
                //将当前的表单页面进行刷新
                // 说白了就是将表单的值进行清空
                // 接下来就是对问题的id进行赋值 利用全局变量来完成
                $("input[type=reset]").trigger("click");
                // 将标题进行清空
                $("#biaoti").val("");
                questionid = data.questionid;
            },"json");
        } else if(ymlduoxuan22.checked){

            // 先要判断当前的答案被选了没有
            // 先获取当前的四个答案是否被选中
            var daan =[];
            var A= $('input:checkbox[name="zhengqueckeckA"]:checked').val();

            if(A!=null&&A!=""){
                daan.push(A);
            }
            var B= $('input:checkbox[name="zhengqueckeckB"]:checked').val();

            if(B!=null&&B!=""){
                daan.push(B);
            }
            var C= $('input:checkbox[name="zhengqueckeckC"]:checked').val();
            if(C!=null&&C!=""){
                daan.push(C);
            }
            var D= $('input:checkbox[name="zhengqueckeckD"]:checked').val();
            if(D!=null&&D!=""){
                daan.push(D);
            }
            if(daan.length<2){
                alert("请至少选择两个答案");
                return false;
            }
            // 当前播放的时长
            var px =$("#ymlwrapper").width();
            var sc2= $("#videoInnerBar").position().left;
            var seconds = (sc2/px)*courseitemseconds;
            var  shichang = parseInt(seconds);
            $("#shichang2").val(shichang);
            // 问题类型进行封装
            $("#handortest2").val(textorhand);
            //封装问题详情的标题
            var biaoti = $("#biaoti").val();
            // 当前课程的id
            var courseid=${course.id}
                $("#courseid2").val(courseid);
            $("#content3").val($("#biaoti").val());
            //封装当前被选中的图片
            $("#itemid2").val($("#pic").children("img").attr("alt"))
            // 封装当前的问题的id
            $("#question2").val(questionid);
            // 将表单进行 异步提交
            //序列化之后的表单
            var formparam=  $("#duoxuanti").serialize();
            //发送异步请求
            var url ="${pageContext.request.contextPath}/admin/business/question/duoxuanti";
            $.post(url,formparam,function(data){
                //将当前的表单页面进行刷新
                // 说白了就是将表单的值进行清空
                // 接下来就是对问题的id进行赋值 利用全局变量来完成
                $("input[type=reset]").trigger("click");
                // 将标题进行清空
                $("#biaoti").val("");
                questionid = data.questionid;

            },"json");
        }else{
             alert("请选择单选还是多选");
             return  false;
         }

    }
    // 接下来就是写添加页面的提交按钮了
    function tijiao() {
        // 判断当前是多选还是单选 然后重新定向到当前展示的页面
        // 先进行判断 单选还是多选
        var danxuan1 = document.getElementById("danxuan");
        var ymlduoxuan22 =document.getElementById("duoxuan");
        if(danxuan1.checked){
            // 如果是单选题
            var A= $('input:radio[name="zhengqueselect"]:checked').val();
            if(A==undefined){
                alert("请选择答案");
                return false;
            }
          /*  var daan =[];
            var A= $('input:radio[name="zhengqueselectA"]:checked').val();

            if(A!=null&&A!=""){
                daan.push(A);
            }
            var B= $('input:radio[name="zhengqueselectB"]:checked').val();

            if(B!=null&&B!=""){
                daan.push(B);
            }
            var C= $('input:radio[name="zhengqueselectC"]:checked').val();
            if(C!=null&&C!=""){
                daan.push(C);
            }
            var D= $('input:radio[name="zhengqueselectD"]:checked').val();
            if(D!=null&&D!=""){
                daan.push(D);
            }

            if(daan==null){
                alert("请选择答案");
                return false;
            }*/
            var px =$("#ymlwrapper").width();
            var sc2= $("#videoInnerBar").position().left;
            var seconds = (sc2/px)*courseitemseconds;
            var  shichang = parseInt(seconds);
            $("#shichang").val(shichang);
            // 问题类型进行封装
            $("#handortest").val(textorhand);
            //封装问题详情的标题
            var biaoti = $("#biaoti").val();
            // 当前课程的id
            var courseid=${course.id}
                $("#courseid").val(courseid);
            $("#content2").val($("#biaoti").val());
            //封装当前被选中的图片

            $("#itemid").val($("#pic").children("img").attr("alt"));
            var itemid = $("#pic").children("img").attr("alt");
            // 封装当前的问题的id
            $("#question").val(questionid);
            // 将表单进行 提交
            var formparam=  $("#danxuanti").serialize();
            //发送异步请求
            var url ="${pageContext.request.contextPath}/admin/business/question/danxuantitijiao";
            $.post(url,formparam,function(data){
                //将当前的表单页面进行刷新
                // 说白了就是将表单的值进行清空
                // 接下来就是对问题的id进行赋值 利用全局变量来完成
                questionid="";
                $("input[type=reset]").trigger("click");
                // 将标题进行清空
                $("#biaoti").val("");
                $(".icon-close").trigger("click");
                $("#ymlhide").hide();
                if(data!=0) {
                    addaudio(data);
                }else{
                    chushihua();
                }
            },"json");


        }else if(ymlduoxuan22.checked){
            // 如果不是 那就走多选
            // 先要判断当前的答案被选了没有
            // 先获取当前的四个答案是否被选中
            var daan =[];
            var A= $('input:checkbox[name="zhengqueckeckA"]:checked').val();

            if(A!=null&&A!=""){
                daan.push(A);
            }
            var B= $('input:checkbox[name="zhengqueckeckB"]:checked').val();

            if(B!=null&&B!=""){
                daan.push(B);
            }
            var C= $('input:checkbox[name="zhengqueckeckC"]:checked').val();
            if(C!=null&&C!=""){
                daan.push(C);
            }
            var D= $('input:checkbox[name="zhengqueckeckD"]:checked').val();
            if(D!=null&&D!=""){
                daan.push(D);
            }
            if(daan.length<2){
                alert("请至少选择两个答案");
                return false;
            }
            // 当前播放的时长
            var px =$("#ymlwrapper").width();
            var sc2= $("#videoInnerBar").position().left;
            var seconds = (sc2/px)*courseitemseconds;
            var  shichang = parseInt(seconds);
            $("#shichang2").val(shichang);
            // 问题类型进行封装
            $("#handortest2").val(textorhand);
            //封装问题详情的标题
            var biaoti = $("#biaoti").val();
            // 当前课程的id
            var courseid=${course.id}
                $("#courseid2").val(courseid);
            $("#content3").val($("#biaoti").val());
            //封装当前被选中的图片
            $("#itemid2").val($("#pic").children("img").attr("alt"));
            var itemid = $("#pic").children("img").attr("alt");
            $("#itemid2").val(itemid);
            // 封装当前的问题的id
            $("#question2").val(questionid);
            //封装当前的课程id
            $("#courseid2").val(${course.id});
            // 将表单进行 提交
            var formparam=  $("#duoxuanti").serialize();
            var url ="${pageContext.request.contextPath}/admin/business/question/duoxuantitijiao";
            $.post(url,formparam,function(data){
                //将当前的表单页面进行刷新
                // 说白了就是将表单的值进行清空
                // 接下来就是对问题的id进行赋值 利用全局变量来完成
                questionid="";
                $(".icon-close").trigger("click");
                $("input[type=reset]").trigger("click");
                // 将标题进行清空
                $("#biaoti").val("");
                $("#ymlhide").hide();
                if(data!=0) {
                    addaudio(data);
                }else{
                    chushihua();
                }
            },"json");
        }else{
            alert("请先选择单选还是多选");
            return false;
        }
    }
    /*第一张图片的加载事件*/
    function chushihua() {
        window.location.href="${pageContext.request.contextPath}/admin/business/course/beike?id="+${course.id};
    }
</script>

<body>
<div class="container">
    <div class="box">
        <!--左边列表-->
        <div class="LeftBox fl">
            <div class="hangUp">
                <h2>挂起</h2>
            </div>
            <div class="LeftImgList">
                <ul id="list2">
                    <%--在页面进行循环 展示 需要在controller里面完成--%>
                    <c:forEach items="${weiguanlian}" var="courseitem">
                        <li ><img src="${courseitem.imageUrl}?x-oss-process=style/list" id="${courseitem.id}"  alt="${courseitem.content}" /><p>${courseitem.id}_${courseitem.name}</p></li>
                    </c:forEach>
                </ul>
                <input class="hide list2SortOrder" name="list2SortOrder" type="hidden" id="list2SortOrder"/>
                <input  type="hidden" id="jiaoyanyinpin" value="${message}"/>
            </div>

        </div>
        <!--右边-->
        <div class="RightBox fl">
            <!--右上-->
            <div class="topList fl">
                <!--图片列表-->
                <div class="imgList fl">
                    <ul id="list1" class="clear">
                        <%--当保存的时候 需要拿到 这个集合的顺序--%>
                        <c:forEach items="${guanlian}" var="courseitem" varStatus="status" >
                            <li onclick="addaudio('${courseitem.id}')" <c:if test="${status.index==0}">class="drag_disable"</c:if>><img src="${courseitem.imageUrl}?x-oss-process=style/list"   alt="${courseitem.id}"  width="100%" height="100%"  alt="本地图片找不到了" /><p <c:if test="${status.index==0}">name="first"</c:if> id="${courseitem.id}">${courseitem.id}_${courseitem.content}</p>
                                <div class="myname">${status.index+1}_${courseitem.content}</div>
                                <div class="mask1 hide"></div></li>
                        </c:forEach>
                    </ul>
                    <input class="hide list1SortOrder" name="list1SortOrder" type="hidden" id="list1SortOrder"/>
                    <!--用来读取剩余的div-->
                </div>
                <div class="pleft"><</div>
                <div class="pright"> > </div>
                <!--按钮列表-->
                <div class="BtnList fr">
                    <div class="btnTop">

                        <button class="addpage">添加页面</button>
                        <button class="delpage">删除页面</button>
                        <button class="copypage" id="copypage" onclick="copypage()">复制页面</button>
                        <button class="pastepage" id="pastepage" onclick="pastepage()">粘贴页面</button>

                    </div>

                </div>
            </div>
            <!--右下-->
            <div class="rig-bottom fl">
                <div class="bottomBox">
                    <div class="pic" id="picbox">
                        <div id="pic">
                            <img src="${ctxStatic}/iframe0/images/big.png" alt="" width="100%" height="100%" id="show_img"/>
                            <div class="mask hide"></div>
                        </div>
                        <!--中间开始按钮-->
                        <img src="${ctxStatic}/iframe0/images/play-a.png" alt="" id="audio_play" onclick="ymlbofang()"/>
                        <!--<div class="clear audio_box" id="audio_box">
                       <div id="wrapper">
                                <audio preload="auto" controls id="audio">
                                  <source src="http://localhost:8080/static/wwww/bc146617c60940718a5b06d0b6835cdc.mp3">
                                  <source src="http://localhost:8080/static/wwww/bc146617c60940718a5b06d0b6835cdc.ogg">
                                  <source src="http://localhost:8080/static/wwww/bc146617c60940718a5b06d0b6835cdc.wav">
                                    <%--这个里面拼接所有的音频文件--%>
                                </audio>
                                <script>$( function() { $( '#audio' ).audioPlayer(); } );</script>
                                <div class="wrapper" id="ymlwrapper">
                                    <div class="s_event clear hands" >
                                        <img src="${ctxStatic}/iframe0/images/hands.png" alt="" width="100%">
                                        <span>举手<i>1</i></span>
                                    </div>
                                    <div class="s_event clear story">
                                        <img src="${ctxStatic}/iframe0/images/story.png" alt="" width="100%">
                                        <span>故事<i>1</i></span>
                                    </div>
                                    <div class="s_event clear test">
                                        <img src="${ctxStatic}/iframe0/images/test.png" alt="" width="100%">
                                        <span>测试<i>1</i></span>
                                    </div>
                                    <div class="s_event clear smile">
                                        <img src="${ctxStatic}/iframe0/images/smile.png" alt="" width="100%">
                                        <span>笑话<i>1</i></span>
                                    </div>
                                </div>
                                <div class="quan">
                                    <img id="fang" onclick="launchFullScreen(document.getElementById('picbox'));" src="${ctxStatic}/iframe0/images/quan.png" alt="" width="100%" height="100%">
                                    <img id="suo" onclick="exitFullscreen();" src="${ctxStatic}/iframe0/images/outScreen.png" alt="" width="100%" height="100%">
                                    <script type="text/javascript">
                                        // 		document.body.onkeydown = function(){
                                        // 		return false;
                                        // 	}
                                        // function launchFullScreen(element) {
                                        //     if(element.requestFullscreen) {
                                        //      element.requestFullscreen();
                                        //     }else if(element.mozRequestFullscreen) { //兼容moz
                                        //      element.mozRequestFullscreen();
                                        //     }else if(element.webkitRequestFullscreen) { //兼容webkit
                                        //      element.webkitRequestFullscreen();
                                        //     }
                                        //     element.style.width = document.body.clientWidth||document.documentElement.clientWidth;
                                        //     element.style.height = document.body.clientHeight||document.documentElement.clientHeight;
                                        //     $(".s_event").hide();
                                        //     document.getElementById('picbox').style.bottom = "0";
                                        //     document.getElementById('fang').style.display = "none";
                                        //     document.getElementById('suo').style.display = "block";
                                        //    }

                                        //    function exitFullscreen() {
                                        //      if(document.exitFullscreen) {
                                        //       document.exitFullscreen();
                                        //      }else if(document.mozCancelFullScreen) { //兼容moz
                                        //       document.mozCancelFullScreen();
                                        //      }else if(document.webkitExitFullscreen) { //兼容webkit
                                        //       document.webkitExitFullscreen();
                                        //      }
                                        //      $(".s_event").show();
                                        //      document.getElementById('picbox').style.bottom = "220px";
                                        //      document.getElementById('fang').style.display = "block";
                                        //     	 document.getElementById('suo').style.display = "none";
                                        // }

                                    </script>
                                </div>
                            </div>
                        </div><br>-->
                        <!--改自定义插件-->
                        <div id="controlsPan" class="clearfix">
                            <img id="playBtn" onclick="bofang()" class="btnimg floatLeftItem" src="${ctxStatic}/iframe0/images/play1.png"
                            />
                            <img id="pauseBtn" onclick="zanting()" class="btnimg floatLeftItem" src="${ctxStatic}/iframe0/images/pause.png"
                            />
                            <span id="currenttime" class="controlstext floatLeftItem">00:00:00</span>
                            <div id="ymlwrapper" class="controlBar floatLeftItem wrapper" style="margin-left:50px;">
                                <div id="videoInnerBar" class="controlInner" style="left: -8px;"></div>
                            </div>
                            <span id="alltime" class="controlstext floatLeftItem" style="position: absolute;right:3%;">00:00:00</span>
                          <%--  <div id="volumeBar" class="controlBar floatRightItem">
                               &lt;%&ndash; <input type="range" id="trackBar" min="1" max="10" step="1" value="1" />&ndash;%&gt;
                                <!-- <div id="volInnerBar" class="controlInner"></div> -->
                            </div>--%>
                          <%--  <img id="mutedBtn" class="btnimg floatRightItem" src="${ctxStatic}/iframe0/images/soundon.png"/>--%>
                           <%-- <img id="fullscreen" class="btnimg floatRightItem" src="${ctxStatic}/iframe0/images/fullscreen.png"/>--%>
                            <img id="cancel-fullscreen" class="btnimg floatRightItem" src="${ctxStatic}/iframe0/images/nomal.png"/>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <!--四个圆球-->
                    <div class="ball clear">
                        <ul class="clear" id="ymlclear">

                           <c:if test="${jushoucishu>0}">
                            <li>
                                <p><span style="color:blue;">${jushoucishu}</span></p>
                                <p>举手剩余</p>
                            </li>
                                </c:if>
                            <c:if test="${jushoucishu2>=0}">
                                <li>
                                    <p><span style="color:#00735c;">${jushoucishu2}</span></p>
                                    <p>举手剩余</p>
                                </li>
                            </c:if>
                            <c:if test="${tiwencishu>0}">
                                <li>
                                    <p><span style="color:#333;">${tiwencishu}</span></p>
                                    <p>提问剩余</p>
                                </li>
                            </c:if>
                            <c:if test="${tiwencishu2>=0}">
                                <li>
                                    <p><span style="color:#00735c;">${tiwencishu2}</span></p>
                                    <p>提问剩余</p>
                                </li>
                            </c:if>
                            <c:if test="${xiaohuacishu>0}">
                                <li>
                                    <p><span style="color:#333";>${xiaohuacishu}</span></p>
                                    <p>笑话剩余</p>
                                </li>
                            </c:if>
                            <c:if test="${xiaohuacishu2>=0}">
                                <li>
                                    <p><span style="color:#00735c";>${xiaohuacishu2}</span></p>
                                    <p>笑话剩余</p>
                                </li>
                            </c:if>
                            <c:if test="${gushicishu>0}">
                                <li>
                                    <p><span style="color:#333";>${gushicishu}</span></p>
                                    <p>故事剩余</p>
                                </li>
                            </c:if>
                            <c:if test="${gushicishu2>=0}">
                                <li>
                                    <p><span style="color:#00735c";>${gushicishu2}</span></p>
                                    <p>故事剩余</p>
                                </li>
                            </c:if>
                        </ul>
                    </div>
                    <!--右侧点击弹框-->
                    <div class="audio_ctrl clear">
                        <div class="play_group" id="play_group">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="box_menu clear">
    <ul class="clear">
        <li class="sure-move" onclick="quedingyidong()" style="background: #eb7f00;">确定移动</li>
        <li class="btn_add" onclick="btnadd()">添加事件</li>
        <li class="delpage">删除页面</li>

        <%-- <li class="btn_hide" onclick="deletecourseitem()">显示/隐藏</li>--%>
        <li class="btn_submit" onclick="beikewanbi()">提交页面</li>
    </ul>
</div>
<div class="audio_btn">
    <button class="add_audio" onclick="addcourseitemaudio2()">添加音频</button>
    <button class="del_audio"  onclick="removeaudio()">删除音频</button>
</div>
<!--弹窗-->
<div class="bg hide">
    <!--提交-->
    <%-- <div class="sub hide">
         <div class="sub-tit">
             <h2>提交失败</h2>
         </div>
         <div class="sub-main">
             <h2>您还需要添加一个“测试事件”</h2>
             <a href="javascript:;" class="sure">确定</a>
         </div>
     </div>--%>
    <!--删除-->
    <div class="delete hide">
        <div class="del-tit">
            <h2>温馨提示</h2>
        </div>
        <div class="del-main">
            <h2>页面删除后将不可恢复，是否确定删除？</h2>
            <div class="fl"><a href="javascript:;"  onclick="deletecourseitem()">确定</a></div>
            <div class="fl"><a href="javascript:;" class="no" id="no">取消</a></div>
        </div>
    </div>
    <!--删除音频-->
    <div class="audiodelete hide">
        <div class="del-tit">
            <h2>温馨提示</h2>
        </div>
        <div class="del-main">
            <h2>音频删除后将不可恢复，是否确定删除？</h2>
            <div class="fl"><a href="javascript:;" class="yes" id="yes">确定</a></div>
            <div class="fl"><a href="javascript:;" class="no" id="no">取消</a></div>
        </div>
    </div>
    <!--添加音频-->
    <div class="audio_add hide">
        <div class="add-tit">
            <h2>添加音频(默认普通音频)</h2>
            <i class="icon-audioclose"></i>
        </div>
        <div class="content">
            <div class="audio-tit">
                <span>音频标题:</span>
                <input type="text" id="audiocontent">
            </div>
            <div class="audioNum">
                <span>音频类型:</span>
                <div class="check_audio clear" id="wrap">
                    <div style='width:24%;float:left;font-weight:bold;'>
                        <!--<input type="radio" name="ymlaudioradio" value="1" id="radio1" onclick="showfile()"><label for="radio1"></label>-->
                        普通音频
                    </div>
                    <form id="inputForm2" type="hidden">
                        <div style='padding-top:12px;'>
                            <label><input type="file" id="ymladdaudio" name="vidio" accept="audio/mp3"  style="width: 300px;height:50px"  onchange="uploadVidio()"/></label>
                            <input type="hidden" name="addaudio" id="addaudio">
                        </div>
                    </form>
                </div>
                <!--<div><input type="radio" name="ymlaudioradio" value="2" id="radio2" onclick="hidefile()"><label for="radio2">空白音频</label></div>
                <div class="audio_time hide"><span>时间:</span><input type="text" id="text"><label for="text">秒</label></div>-->

                <%--进行回显的div--%>
                <div>
                    <audio id="source" autoplay="autoplay" controls="controls" loop="loop"
                    >helloworld</audio>
                </div>
            </div>
            <a class="sub-file" id="ymluploadaudio" href="javascript:;" onclick="addcourseitemaudio()">上传</a>
        </div>
    </div>
    <!--添加事件-->
    <div class="event hide" id="ymlhands2">
        <div class="event-tit">
            <h2>选择事件类型</h2>
            <a class="icon-close"></a>
        </div>
        <div class="event-main">
            <form action="" method="post">
                <label><input name="Fruit" type="radio" value="1" />举手<span>(<i>20</i>)</span></label><br />
                <label><input name="Fruit" type="radio" value="0" />提问<span>(<i>20</i>)</span></label><br />
                <label><input name="Fruit" type="radio" value="3" />故事<span>(<i>20</i>)</span></label><br />
                <label><input name="Fruit" type="radio" value="2" />笑话<span>(<i>20</i>)</span></label><br />
                <label id="hand" onclick="hand2()"></label>
                <label id="test" onclick="test2()"></label>
            </form>
            <a href="javascript:;" onclick="shijian()">确定</a>
        </div>
    </div>
    <div class="Handsupd hide" id="ymlhide">
        <div class="add-head">
            <h2>举手事件添加</h2>
            <i class="icon-closed"></i>
        </div>
        <div class="content">
            <div class="title">
                <span>1.标题</span>
                <input type="text" name="biaoti" id="biaoti">
            </div>
            <div class="select">
                <span class='ceshi fl'>测试题选项</span>
                <div class="rad-danxuan fl" >
                    <input type="radio" id="danxuan" name="danxuan"><span>单选答案</span>
                </div>
                <div class="rad-duoxuan fl">
                    <input type="radio" id="duoxuan" name="danxuan"><span>多选答案</span>
                </div>
                <div class="zhengque fl">
                    <span>选择正确答案</span>
                </div>
            </div>
            <div class="list list1">
                <%--添加一个隐藏的form表单 用来封装数据--%>
                <form id="danxuanti" action="${pageContext.request.contextPath}/admin/business/question/danxuantitijiao" method="post">
                    <%--用来封装当前音频播放的时长--%>
                    <input type="hidden" name="shichang" id="shichang">
                    <%--用来封装是举手还是测试事件--%>
                    <input type="hidden" name="handortest" id="handortest">
                    <%--用来封装问题详细的标题--%>
                    <input type="hidden" name="content" id="content2">
                    <%--用来封装当前被选中的图片--%>
                    <input type="hidden" name="itemid" id="itemid">
                    <%--当前课程的id--%>
                    <input type="hidden" name="courseid" id="courseid">
                    <%--当前的问题的id--%>
                    <input type="hidden" name="questionid" id="question">
                    <%--用来清除表单--%>
                    <input type="reset" name="reset" style="display: none;" />
                    <ul>
                        <li>
                            <span>A</span>
                            <input type="text" name="contentA" required="required">
                            <input type="radio" name="zhengqueselect" value="zhengqueselectA">
                        </li>
                        <li>
                            <span>B</span>
                            <input type="text" name="contentB"  required="required">
                            <input type="radio" name="zhengqueselect" value="zhengqueselectB">
                        </li>
                        <li>
                            <span>C</span>
                            <input type="text" name="contentC"  required="required">
                            <input type="radio" name="zhengqueselect" value="zhengqueselectC">
                        </li>
                        <li>
                            <span>D</span>
                            <input type="text" name="contentD"  required="required">
                            <input type="radio" name="zhengqueselect" value="zhengqueselectD">
                        </li>
                        <li>
                            <span>设置答题时间</span>
                            <input type="text" name="shoutime"  required="required">秒
                        </li>
                    </ul>
                </form>
            </div>
            <div class="list list2 hide">
                <form id="duoxuanti" action="${pageContext.request.contextPath}/admin/business/question/duoxuantitijiao" method="post">
                    <input type="hidden" name="shichang" id="shichang2">
                    <%--用来封装是举手还是测试事件--%>
                    <input type="hidden" name="handortest" id="handortest2">
                    <%--用来封装问题详细的标题--%>
                    <input type="hidden" name="content" id="content3">
                    <%--用来封装当前被选中的图片--%>
                    <input type="hidden" name="itemid" id="itemid2">
                    <%--当前的问题的id--%>
                    <input type="hidden" name="questionid" id="question2">
                    <%--用来清除表单--%>

                    <%--当前课程的id--%>
                    <input type="hidden" name="courseid" id="courseid2">
                    <input type="reset" name="reset2" style="display: none;" />
                    <ul>
                        <li>
                            <span>A</span>
                            <input type="text" name="contentA"  required="required">
                            <input type="checkbox" name="zhengqueckeckA" value="zhengqueckeckA">
                        </li>
                        <li>
                            <span>B</span>
                            <input type="text" name="contentB"  required="required">
                            <input type="checkbox" name="zhengqueckeckB" value="zhengqueckeckB">
                        </li>
                        <li>
                            <span>C</span>
                            <input type="text" name="contentC"  required="required">
                            <input type="checkbox" name="zhengqueckeckC" value="zhengqueckeckC">
                        </li>
                        <li>
                            <span>D</span>
                            <input type="text" name="contentD"  required="required">
                            <input type="checkbox" name="zhengqueckeckD" value="zhengqueckeckD">
                        </li>
                        <li>
                            <span>设置答题时间</span>
                            <input type="text" name="shoutime">
                        </li>
                    </ul>
                </form>
            </div>
            <div class="nextpage">
                <a href="javascript:;" onclick="xiayiti()">下一题</a>
                <a  href="javascript:;" onclick="tijiao()">提交</a>
            </div>
        </div>
    </div>
    <%--从这往上都是添加问题的div--%>


    <%--这个下面都是进行回显的div--%>
    <div class="Handsupd hide" style="display:none" id="ymlhands" >
        <div class="add-head">
            <h2>举手事件</h2>
            <i class="icon-closed"></i>
        </div>
        <div class="content">
            <div class="title">
                <span>1.标题</span>
                <input type="text" name="biaoti" id="ymlbiaoti">
            </div>
            <div class="select">
                <span class='ceshi fl'>测试题选项</span>
                <div class="rad-danxuan fl" >
                    <input type="radio" id="ymldanxuan" name="danxuan"><span>单选题目</span>
                </div>
                <div class="rad-duoxuan fl">
                    <input type="radio" id="ymlduoxuan" name="danxuan"><span>多选题目</span>
                </div>
                <div class="zhengque fl">
                    <span>选择正确答案</span>
                </div>
            </div>
            <div class="list list1" id="ymllist1">
                <%--添加一个隐藏的form表单 用来封装数据--%>
                <form id="ymldanxuanti" action="${pageContext.request.contextPath}/admin/business/question/danxuantitijiao" method="post">
                    <%--用来封装当前音频播放的时长--%>
                    <input type="hidden" name="shichang" id="shichang">
                    <%--用来封装是举手还是测试事件--%>
                    <input type="hidden" name="handortest" id="handortest">
                    <%--用来封装问题详细的标题--%>
                    <input type="hidden" name="content" id="content2">
                    <%--用来封装当前被选中的图片--%>
                    <input type="hidden" name="itemid" id="itemid">
                    <%--当前课程的id--%>
                    <input type="hidden" name="courseid" id="courseid">
                    <%--当前的问题的id--%>
                    <input type="hidden" name="questionid" id="question">
                    <%--用来清除表单--%>
                    <input type="reset" name="reset" style="display: none;" />
                    <ul>
                        <li>
                            <span>A</span>
                            <input type="text" name="contentA" id="ymlcontentA"  required="required">
                            <input type="radio" name="zhengqueselect" value="zhengqueselectA">
                        </li>
                        <li>
                            <span>B</span>
                            <input type="text" name="contentB" id="ymlcontentB"  required="required">
                            <input type="radio" name="zhengqueselect" value="zhengqueselectB">
                        </li>
                        <li>
                            <span>C</span>
                            <input type="text" name="contentC" id="ymlcontentC"  required="required">
                            <input type="radio" name="zhengqueselect" value="zhengqueselectC">
                        </li>
                        <li>
                            <span>D</span>
                            <input type="text" name="contentD" id="ymlcontentD"  required="required">
                            <input type="radio" name="zhengqueselect" value="zhengqueselectD">
                        </li>
                    </ul>
                </form>
            </div>
            <div class="list list2 hide" id="ymllist2">
                <form id="ymlduoxuanti" action="${pageContext.request.contextPath}/admin/business/question/duoxuantitijiao" method="post">
                    <input type="hidden" name="shichang" id="shichang2">
                    <%--用来封装是举手还是测试事件--%>
                    <input type="hidden" name="handortest" id="handortest2">
                    <%--用来封装问题详细的标题--%>
                    <input type="hidden" name="content" id="content3">
                    <%--用来封装当前被选中的图片--%>
                    <input type="hidden" name="itemid" id="itemid2">
                    <%--当前的问题的id--%>
                    <input type="hidden" name="questionid" id="question2">
                    <%--用来清除表单--%>
                    <input type="reset" name="reset2" style="display: none;" />
                    <ul>
                        <li>
                            <span>A</span>
                            <input type="text" name="contentA" id="ymlcontentA2"  required="required">
                            <input type="checkbox" name="zhengqueckeckA">
                        </li>
                        <li>
                            <span>B</span>
                            <input type="text" name="contentB" id="ymlcontentB2"  required="required">
                            <input type="checkbox" name="zhengqueckeckB">
                        </li>
                        <li>
                            <span>C</span>
                            <input type="text" name="contentC" id="ymlcontentC2"  required="required">
                            <input type="checkbox" name="zhengqueckeckC">
                        </li>
                        <li>
                            <span>D</span>
                            <input type="text" name="contentD" id="ymlcontentD2"  required="required">
                            <input type="checkbox" name="zhengqueckeckD">
                        </li>
                    </ul>
                </form>
            </div>
            <div class="nextpage">

                <a href="javascript:;" onclick="ymlxiayiti()" id="ymlxiayitia12312312">下一题</a>
                <a  href="javascript:;" onclick="ymltijiao()" id="ymltijiao()">提交</a>
            </div>
        </div>
    </div>
    <%--从这往上都是进行回显的div--%>

    <%--第三个div 目的是提供编辑功能和删除功能--%>
    <div class="Handsupd hide" style="display:none" id="ymlhands222"  >
        <div class="add-head">
            <h2>举手事件</h2>
            <i class="icon-closed"></i>
        </div>
        <div class="content">
            <div class="title">
                <span>1.标题</span>
                <input type="text" name="biaoti" id="ymlbiaoti22">
            </div>
            <div class="select">
                <span class='ceshi fl'>测试题选项</span>
                <div class="rad-danxuan fl" >
                    <input type="radio" id="ymldanxuan22" name="danxuan222" value="0"><span>单选题目</span>
                </div>
                <div class="rad-duoxuan fl">
                    <input type="radio" id="ymlduoxuan22" name="danxuan222" value="1"><span>多选题目</span>
                </div>
                <div class="zhengque fl">
                    <span>选择正确答案</span>
                </div>
            </div>
            <div class="list list1" id="dxymllist">
                <%--添加一个隐藏的form表单 用来封装数据--%>
                <form id="ymldanxuanti2" action="${pageContext.request.contextPath}/admin/business/question/updatedanxuanti" method="post">
                    <%--当前的问题详情的id--%>
                    <input type="hidden" name="questionitemid" id="dxymlquestionitem">
                    <input type="hidden" name="content" id="questionitemcontent">
                    <%--用来清除表单--%>
                    <input type="reset" name="reset" style="display: none;" />
                    <ul>
                        <li>
                            <span>A</span>
                            <input type="text" name="contentA" id="dxymlcontentA"  required="required">
                            <input type="radio" name="zhengqueselect" value="zhengqueselectA">
                        </li>
                        <li>
                            <span>B</span>
                            <input type="text" name="contentB" id="dxymlcontentB"  required="required">
                            <input type="radio" name="zhengqueselect" value="zhengqueselectB">
                        </li>
                        <li>
                            <span>C</span>
                            <input type="text" name="contentC" id="dxymlcontentC"  required="required">
                            <input type="radio" name="zhengqueselect" value="zhengqueselectC">
                        </li>
                        <li>
                            <span>D</span>
                            <input type="text" name="contentD" id="dxymlcontentD"  required="required">
                            <input type="radio" name="zhengqueselect" value="zhengqueselectD">
                        </li>
                    </ul>
                </form>
            </div>
            <div class="list list2 hide" id="dxymllist2">
                <form id="ymlduoxuanti2" action="${pageContext.request.contextPath}/admin/business/question/updateduoxuanti" method="post">
                    <%--当前的问题详情的id--%>
                    <input type="hidden" name="questionitemid" id="questionitem32">
                    <input type="hidden" name="content" id="questionitemcontent2">
                    <%--用来清除表单--%>
                    <input type="reset" name="reset2" style="display: none;" />
                    <ul>
                        <li>
                            <span>A</span>
                            <input type="text" name="contentA" id="ymlcontentA32"  required="required">
                            <input type="checkbox" name="zhengqueckeckA" value="zhengqueckeckA">
                        </li>
                        <li>
                            <span>B</span>
                            <input type="text" name="contentB" id="ymlcontentB32"  required="required">
                            <input type="checkbox" name="zhengqueckeckB" value="zhengqueckeckB">
                        </li>
                        <li>
                            <span>C</span>
                            <input type="text" name="contentC" id="ymlcontentC32"  required="required">
                            <input type="checkbox" name="zhengqueckeckC" value="zhengqueckeckC">
                        </li>
                        <li>
                            <span>D</span>
                            <input type="text" name="contentD" id="ymlcontentD32"  required="required">
                            <input type="checkbox" name="zhengqueckeckD" value="zhengqueckeckD">
                        </li>
                    </ul>
                </form>
            </div>
            <div class="nextpage clearfix" >
                <a  href="javascript:;" onclick="ymldeleteall()" id="deleteall" style="float:left">删除当前的事件</a>
                <a  href="javascript:;" onclick="ymltijiao2()" id="ymltijiao2" style="float:right">提交</a>
                <a href="javascript:;" onclick="ymlxiayiti2()" id="ymlxiayiti23456" style="float:right">下一题</a>

            </div>
        </div>
    </div>
    <%--从这往上都是编辑和删除功能的div--%>
    <!--上传-->
    <form id="inputForm" method="post" enctype="multipart/form-data">
        <div class="upload hide" style='width:36%;'>
            <div class="title">
                <h2>添加页面</h2>
                <i class="icon-upclose"></i>
            </div>
            <div class="content">
                <div class="pagetitle">
                    <span>页面标题</span>
                    <input type="text" id="content">
                </div>
                <div class="pagetitle">
                    <span>选择图片</span>
                    <input type="file" name="pics" size="30" onchange="uploadPic()" accept="image/gif, image/jpeg,image/png" multiple  style='padding:4px;'/>
                    <input id="imgurl22" name="imgurl" type="hidden">
                </div>
                <div class="pagecontent">
                    <%-- <img id="" src="${ctxStatic}/iframe0/images/put.png" alt="" width="400px" height="150px">--%>
                    <a href="javascript:;" onclick="addcourseitem()">确定</a>
                </div>
            </div>
        </div>
    </form>
</div>

<%--弹框--%>
<div class="tanchuang">
    <div class="tan-mask">
        <h2>放松一下<img src="${ctxStatic}/iframe0/images/close.png" onclick="tanchuanyincang()"></h2>
        <div id="ymltanchaung"><p>
            <img alt="aaaqqq" src="http://data.fanrenqiji.com/upload/20170321/7250f652-1f6e-435a-bcae-f7a9d3e1b0df.jpg"/></p>
        </div>
        <a  href="javascript:;" onclick="ymldeleteall()" id="deleteall2">删除当前的事件</a>
    </div>
</div>

<div class="audio-mask hide">
    <div class="delete">
        <div class="del-tit">
            <h2>温馨提示</h2>
        </div>
        <div class="del-main">
            <h2>音频删除后将不可恢复，是否确定删除？</h2>
            <div class="fl"><a href="javascript:;"  onclick="ymldeleteaudio()">确定</a></div>
            <div class="fl"><a href="javascript:;" class="no" onclick="xiaoshi()" id="ymlno">取消</a></div>
        </div>
    </div>
</div>

</body>
</html>